<template>
  <div class="layout">
    <div class="titleText">数据资产管理服务平台</div>
    <a-form :model="loginForm" class="formWrap" label-align="left">
      <a-row>
        <a-col>
          <a-form-item field="account" label="" label-col-flex="0px">
            <a-input class="input" v-model="loginForm.account" placeholder="请输入您的账号或手机号">
              <template #prefix>
                <icon-user />
              </template>
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <a-form-item field="password" label="" label-col-flex="0px">
            <a-input-password class="input" v-model="loginForm.password" placeholder="请输入密码" :visibility="visibility"
              @visibility-change="handleChange">
              <template #prefix>
                <icon-user />
              </template>
            </a-input-password>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <a-form-item field="verify_code" label="" label-col-flex="0px" style="margin-bottom: 10px">
            <a-input class="input" v-model="loginForm.verify_code" placeholder="请输入验证码">
              <template #append>
                <a-button @click="getCode">获取验证码</a-button>
              </template>
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <a-form-item field="" label="" label-col-flex="0px" style="margin-bottom: 10px">
            <div style="height: 40px; width: 200px">
              <img v-if="image" style="width: 100%; height: 100%" :src="image" alt="" />
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <a-form-item field="value1" label="" label-col-flex="0px">
            <a-button class="input-btn" type="primary" :loading="flag" @click="submit">登录</a-button>
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider orientation="center">其他登录</a-divider>
      <div>
        <a-button @click="linkTo">中电云</a-button>
      </div>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import router from "@/router";
import CryptoJS from 'crypto-js';
const loginForm = reactive({
  account: 'admin',
  password: '123456',
  type: '1', // 登录类型，0-用户密码认证;1-code认证
  // code: ''
});
const image = ref('');
import store from '@/stores/store';
/**
 * @method 登录
 */
import * as api from '@/api/login/login';
import { Message } from '@arco-design/web-vue';

const submit = async () => {
  flag.value = true;
  // const md5Hash = CryptoJS.MD5(loginForm.password).toString(CryptoJS.enc.Hex).toLowerCase();
  // let obj = {
  //   ...loginForm,
  //   password: md5Hash
  // };
  let res: any = await api.login(loginForm);
  if (res.code == 400) {
    Message.error(res.message);
    flag.value = false;
  }

  if (res.code == '200') {
    console.log(res);
    // 此处存储登录token
    store.LoginData().tokenSet(res.data);
    // // 此处存储对应角色权限
    // store.LoginData().setPermission(res?.data?.menu_hash_key_map);
    // // 此处存储对应的菜单权限
    // store.LoginData().setMenuPermission(res?.data?.menuData);

    // 此处执行登录后不同身份判断操作
    Message.success('登录成功');
    console.log(router.getRoutes());

    router.push({ name: 'index' });
  }

  // 如果为管理员，则进入大屏
  // if (res.data.is_admin) {
  //   router.push({ name: 'screen' });
  //   return;
  // } else {
  //   // 遍历菜单key列表，动态添加路由
  //   let menuNameData = res.data.menuData.map((v: any) => v.menu_name);
  //   console.log("菜单列表", menuNameData);
  //   if (res.data.menuData.length == 0) {
  //     console.log("菜单数据为空");
  //   }
  //   if (res.data.menuData.length > 0) {
  //     console.log("路由数据", router.options.routes);
  //     const menuList = router.options.routes.filter((v) => {
  //       console.log(v);
  //       console.log(v.meta?.title);
  //       console.log(menuNameData.includes(v.meta?.title));
  //       return menuNameData.includes(v.meta?.title);
  //     });

  //     console.log("匹配到的本地的路由数据", menuList);
  //     if (menuList.length > 0) {
  //       console.log(menuList);
  //       console.log("进入菜单", menuList[0].name);
  //       router.push({ name: menuList[0].name });
  //     }

  //   }
  // }

};
/**
 * @method 获取验证码
 */
const getCode = async () => {
  let res = await api.code(loginForm.account);
  image.value = res.data.code_base64_str;
  console.log(res);
};
/**
 * @method 密码是否可见
 */
const visibility = ref(true);
const handleChange = () => {
  visibility.value = !visibility.value;
};
/**
 * @method 添加loading状态
 */
const flag = ref(false);
/* 跳转中电云登录 */
const linkTo = async () => {
  /* 获取当前浏览器地址路劲 */
  let redirect_uri = window.location.href;
  /* 如果地址上包含code，则去除字段值 */
  if (redirect_uri.indexOf('code') != -1) {
    redirect_uri = redirect_uri.split('&')[0];
  }
  let res = await api.getZdLoginUrl(redirect_uri);
  if (res.url) {
    window.location.href = res.url;
  }
};
/* 获取中电登录返回的code */
const getZdUrlCode = async (code) => {
  let res: any = await api.zdLogin(code);
  if (res.code == 200) {
    store.LoginData().tokenSet(res.data.token);
    router.push({ name: 'index' });
  }
};
onMounted(() => {
  /* 获取地址上的code */
  let url = window.location.href;
  if (url.indexOf('code') == -1) {
    return;
  }
  let code = url.split('?')[1].split('=')[1];
  getZdUrlCode(code);
});
</script>

<style lang="less" scoped>
.layout {
  width: 100%;
  height: 100vh;
  background-image: url('@/assets/images/bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .input {
    width: 360px;
    height: 46px;
    border-radius: 4px;
    opacity: 1;
    box-sizing: border-box;
    background: #f7f9fc;
  }

  :deep(.arco-input-wrapper) {
    background: #f7f9fc;
  }

  :deep(.arco-input-append) {
    background: #f7f9fc;
    border-left: 0;
  }

  .input-btn {
    width: 360px;
    height: 46px;
    border-radius: 4px;
    opacity: 1;
    box-sizing: border-box;
    background: #1459fa;
  }

  .titleText {
    width: 360px;
    font-size: 34px;
    position: absolute;
    top: 28%;
    right: 21.9%;
    text-align: center;
    color: #394d73;
  }

  .formWrap {
    width: 440px;
    background: #ffffff;
    box-shadow: 0px 4px 24px 0px rgba(55, 77, 115, 0.1);
    border-radius: 16px;
    position: absolute;
    top: 34%;
    right: 19.9%;
    padding: 40px 40px;
    display: flex;
    flex-direction: column;
    justify-content: start;
  }
}
</style>
